import React, { useRef, useState } from 'react';
import ProTableComp from '@/components/ProTableComp';
import { ColumnsType, ToolsType } from '@/components/ProTableComp/index';
import "./index.less";

const BasicForm = () => {
	const formActionRef = useRef();
	const tableActionRef = useRef();
	const [columns] = useState<ColumnsType[]>([{
			title: 'Name',
			width: 300,
			dataIndex: 'name',
			key: 'name',
			minConstraints: 20,
			valueType: 'text',
		},
		{
			title: 'Age',
			dataIndex: 'age',
			key: 'age',
			width: 100,
			valueType: 'text',
		},
		{
			title: 'Address',
			dataIndex: 'address',
			key: 'address',
			width: 100,
			valueType: 'text',
		},
		{
			title: '价格范围',
			dataIndex: 'price',
			key: 'price',
			width: 100,
			valueType: 'moneyRange',
			hideTable: true,
		},
		{
			title: '日期',
			dataIndex: 'dateRange',
			key: 'dateRange',
			width: 100,
			valueType: 'dateRange',
			hideTable: true,
		},
		{
			title: 'Tags',
			key: 'tags',
			dataIndex: 'tags',
			width: 300,
			valueType: 'select',
			valueEnum: (row: any) => {
				// search 部分没有 row
				if (!row) return { open: { text: '未解决', status: 'Error' }, closed: { text: '已解决', status: 'Success' } };
				return { open: { text: '未解决', status: 'Error' }, closed: { text: '已解决', status: 'Success' } };
			},
		},
		{
			title: 'User',
			dataIndex: 'User',
			key: 'User',
			width: 100,
			valueType: 'user',
		},
		{
			title: 'Action',
			key: 'action',
			fixed: 'right',
			render: (_, record: any) => (
				<div>
					<span>{record.name}</span>
					<a style={{ margin: '0 8px' }}>
						Render
					</a>
				</div>
			)
		}
	]);
	const [tools] = useState<ToolsType[]>([{
		type: 'switch',
		text: '开启审核',
		onChange: (...args: any) => {
			console.log('开启审核');
			console.log(args, '1230')
		},
	}, {
		type: 'selectAndButton',
		text: '下载超级模板',
		compProps: {
			type: 'primary',
		},
		options: [{
			label: '下载1',
			value: 'download1',
		}, {
			label: '下载2',
			value: 'download2',
		}, {
			label: '下载3',
			value: 'download3',
		}],
		onClick: (...args: any) => {
			console.log('搜索');
			console.log(args, '1230')
		},
	},{
		type: 'button',
		text: '新增',
		compProps: {
			type: 'primary',
		},
		onClick: (...args: any) => {
			console.log('新增');
			console.log(args, '1230')
		},
	}]);

	return (
		<div className="card content-box">
			<ProTableComp
				tableName="商品列表"
				isShowGameAll={true}
				actionRef={tableActionRef}
				formRef={formActionRef}
				request={() => {}}
				params={{}}
				columns={columns}
				tools={tools}
			/>
		</div>
	);
};

export default BasicForm;
